<template>
  <div>
    <!--头部-->
		<header>
			<!--页眉-->
			<div class="header">
				<div class="container">
					<p class="p14 col-md-6 col-xs-6 text-left">欢迎来到XXX宠物医院!</p>
					<P class="p14 col-md-6 col-xs-6 text-right"><span class="glyphicon glyphicon-earphone"></span>&nbsp;&nbsp;&nbsp;宠物咨询：XXX</P>
				</div>
			</div>

			<!--导航-->
			<nav class="nav_top">
				<div class="container">
					
					<div id="mynavbar" class="collapse navbar-collapse">
						<ul class="nav navbar-nav nav_li navbar-right">
							<li>
								<router-link to="/">首页</router-link>
							</li>
							<li>
								<router-link to="/">关于我们</router-link>
							</li>
							<li>
								<router-link to="/">医疗设施</router-link>
							</li>
							<li>
								<router-link to="/">医疗服务</router-link>
							</li>

							<li>
								<router-link to="/">宠物百科</router-link>
							</li>
							<li>
								<router-link to="/">联系我们</router-link>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</header>
		<!--幻灯片-->
		<section class="ab_img">
			<img src="../assets/images/news.jpg">
		</section>
		<!--面包屑-->
		<div class="mianb">
			<div class="container">
				<div class="row">

					<div class="zi_bread">
						<div class="bread_con">
							<h3>宠物百科</h3>
							<div class="curre">您当前位置：
								<router-link to="/">首页</router-link> >
								<router-link to="/news">宠物百科</router-link>
								<!-- > <span>宠物常识</span>-->
							</div>
						</div>
					</div>
					<!--<div class="cur_top">
						<router-link to="/" href="news.html" class="active">公司新闻</router-link>
						<router-link to="/" href="news.html">宠物常识</router-link>
					</div>-->
					<div class="new_con">
						<div class="container">
							<ul class="new_ul clearfix">
								<li  v-for="(k,i) in lidata" :key="i">
									<div class="img wow bounceIn">
										<router-link :to="`/newsShow/${k.news_id}`"><img :src="k.imge" alt="" class="vcenter" /></router-link>
									</div>
									<div class="img_zi">
										<router-link :to="`/newsShow/${k.news_id}`" class="title">{{k.news_title}}</router-link>
										<time>{{k.news_time}}</time>
										<p>
											{{k.content1}}
										</p>
										<router-link :to="`/newsShow/${k.news_id}`" class="more">查看更多>></router-link>
									</div>
								</li>
							</ul>
							<div class="page">
								<button class="ye" @click="toup">上一页</button>
								<button class="active" @click="to1">1</button>
								<button class="active" @click="to2">2</button>
								<button class="ye" @click="todown">下一页 </button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--联系我们-->
		<footer class="footer">
			<div class="container">
				<div class="b-nav wow fadeInUp" data-wow-delay=".1s">
					<router-link to="/">首 页</router-link>
					<router-link to="/">关于我们</router-link>
					<router-link to="/">医疗设施</router-link>
					<router-link to="/">医疗服务</router-link>
					<router-link to="/">宠物百科</router-link>
					<router-link to="/">联系我们</router-link>
				</div>
				<p class="wow fadeInUp jshu" data-wow-delay=".3s">Copyright © 2020 宠物医院 | XXX宠物医院</p>
				<p class="wow fadeInUp jshu" data-wow-delay=".5s">技术支持：&nbsp;&nbsp;&nbsp;
					
				</p>
			</div>
		</footer>
		<!--回到顶部-->
		<router-link to="/" class="top"><span class="glyphicon glyphicon-menu-up jiantou"></span></router-link>
  </div>
</template>
<script>
export default {
  data(){
    return{
      lidata:[]
    }
  },
  methods:{
    todown(){
      this.axios.get("/news/news_article",{params:{page:2}}).then(res=>{
        this.lidata=res.data.result;
        res.data.result.forEach(item=>{
            item.imge = require(
              '../assets/images/'+item.imge)
        })
    })
    },
    toup(){
      this.axios.get("/news/news_article",{params:{page:1}}).then(res=>{
        this.lidata=res.data.result;
        res.data.result.forEach(item=>{
            item.imge = require(
              '../assets/images/'+item.imge)
        })
    })
    },
    to2(){
      this.axios.get("/news/news_article",{params:{page:2}}).then(res=>{
        this.lidata=res.data.result;
        res.data.result.forEach(item=>{
            item.imge = require(
              '../assets/images/'+item.imge)
        })
    })
    },
    to1(){
      this.axios.get("/news/news_article",{params:{page:1}}).then(res=>{
        this.lidata=res.data.result;
        res.data.result.forEach(item=>{
            item.imge = require(
              '../assets/images/'+item.imge)
        })
    })
    }
  },
  mounted(){
    this.axios.get("/news/news_article",{params:{page:1}}).then(res=>{
        this.lidata=res.data.result;
        res.data.result.forEach(item=>{
            item.imge = require(
              '../assets/images/'+item.imge)
        })
        console.log(this.lidata);
    })
  }
}
</script>



